<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<head>
    <title>Cesium006-entity</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" type="text/css" href="./Cesium/Widgets/widgets.css">
    <script type="text/javascript" src="./cesium/Cesium.js"></script>
    <style>
        div,
        body {
            padding: 0;
            margin: 0;
        }

        .cesium-widget-credits {
            display: none !important;
        }
    </style>

<body>
    <div id="cesiumcontainer" style="width:100%;height:100%"></div>

    <script type="text/javascript">
        var viewer = new Cesium.Viewer("cesiumcontainer", {
            //动态动画
            shouldAnimate: true,
        })
        let position = Cesium.Cartesian3.fromDegrees(114.162813, 21.279327, 2000);
        // 设置模型方向
        let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), Cesium.Math.toRadians(0), Cesium.Math.toRadians(0));//弧度
        let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
        let model = viewer.entities.add({
            // 模型id
            id: 'model',
            // 模型位置
            position: position,
            // 模型方向
            orientation: orientation,
            // 模型资源
            model: {
                // 模型路径
                uri: './gltf/ExportModel.gltf',
            }
        })

        viewer.zoomTo(model)

        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (click) {
            var pickedObject = viewer.scene.pick(click.position);
            if (Cesium.defined(pickedObject)) {
                pickedObject.id.model.color = Cesium.Color.RED  // 改变颜色
                pickedObject.id.model.silhouetteColor = Cesium.Color.BLUE   // 轮廓颜色
                pickedObject.id.model.silhouetteSize = 5   // 轮廓宽度
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    </script>
</body>

</html>